<template>
    <div class="pies-container">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <div class="nav-item" :class="{ active: activeTab === 0 }" @click="changeTab(0)">收入情况</div>
            <div class="nav-item" :class="{ active: activeTab === 1 }" @click="changeTab(1)">科技专题</div>
            <div class="nav-item" :class="{ active: activeTab === 2 }" @click="changeTab(2)">医疗质询</div>
        </div>
        <div class="content">
            <!-- 饼图容器 -->
            <div class="pieCharts" ref="pieCharts"></div>
        </div>
        <div class='legend'>
            <div class="legend-item" v-for="(item, index) in pieData" :key="item">
                <p :class="`icon-${index + 1}`"></p><span>{{ item }}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const pieData = ['个人缴纳', '外包收入', '中央财政收入', '地方财政收入', '其他收入']
const activeTab = ref(1); // 当前激活的标签索引
const pieCharts = ref(null); // 图表实例

// 切换标签方法
const changeTab = (index: number) => {
    activeTab.value = index;
};

onMounted(() => {
    const option = {
        series: [
            {
                type: 'pie',
                radius: ['45%', '65%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    formatter: '{c}%', // 显示百分比
                    fontSize: 12,
                    color: '#fff',
                    position: 'outside' // 设置数值在饼图外部
                },
                labelLine: {
                    show: false, // 显示指示线
                    length: 5, // 指示线第一段长度
                    length2: 10, // 指示线第二段长度
                    lineStyle: {
                        color: '#fff'
                    }
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                data: [
                    { value: 35, name: '个人缴纳', itemStyle: { color: 'purple' } },
                    { value: 7, name: '外包收入', itemStyle: { color: 'orange' } },
                    { value: 11, name: '中央财政收入', itemStyle: { color: 'cyan' } },
                    { value: 17, name: '地方财政收入', itemStyle: { color: 'blue' } },
                    { value: 30, name: '其他收入', itemStyle: { color: 'red' } }
                ]
            }
        ],
        legend: {
            orient: 'vertical',
            x: 'left',
            y: 'center',
            data: ['个人缴纳', '外包收入', '中央财政收入', '地方财政收入', '其他收入'],
            textStyle: {
                color: '#fff',
                align: 'right',
                fontWeight: 'bold'
            }
        }
    };

    // 渲染图表
    const myChart = echarts.init(pieCharts.value);
    myChart.setOption({
        ...option,
        legend: { show: false } // 隐藏图例
    });
});
</script>

<style scoped>
.pies-container {
    /* background-color: #031d44; */
    color: #fff;
    padding: 16.2px;
    border-radius: 8.1px;
    width: calc(100% + 8.5vh);
    max-width: calc(480px + 8.5vh);
    margin: 0 auto;
    height: calc(34.15vh);
    position: relative;

    /* 顶部导航 */
    .top-nav {
        display: flex;
        margin-bottom: 16.2px;

        .nav-item {
            padding: 7.2px 16.2px;
            cursor: pointer;
            font-size: 12px;
            color: #fff;
            height: 8px;
            width: 56px;
            text-align: center;
            line-height: 8px;
            border: 1.35px solid transparent;
            border-radius: 3.6px;
            transition: all 0.3s ease;
        }

        .nav-item:nth-child(2) {
            margin-left: 80px;
            clip-path: polygon(20% 0, 90% 0, 90% 100%, 0 100%);
            border: 1.6px solid rgb(8, 110, 112);
        }

        .nav-item:nth-child(3) {
            clip-path: polygon(20% 0, 90% 0, 90% 100%, 0 100%);
            border: 1.6px solid rgb(8, 110, 112);
        }

        .nav-item.active {
            background-color: rgb(32, 174, 226);
        }
    }

    /* 内容区域 */
    .content {
        display: flex;
        justify-content: center;
        /* 居中显示饼图 */
        align-items: center;
        transform: rotate(50deg);
        position: relative;
        position: absolute;
        top: 4vh;
        left: -5vh;

        .pieCharts {
            width: 400px;
            height: 300px;
        }
    }

    .legend {
        width: 40%;
        height: 18vh;
        position: absolute;
        top: 12vh;
        right: 0;
        line-height: 3.5vh;
        font-size: 15px;
        font-weight: bolder;

        .legend-item {
            display: flex;
            flex-direction: row;
            align-items: center;

            .icon-1 {
                width: 30px;
                height: 15px;
                background: #581adc;
                margin-right: 1vh;
            }

            .icon-2 {
                width: 30px;
                height: 15px;
                background: #da9108;
                margin-right: 1vh;
            }

            .icon-3 {
                width: 30px;
                height: 15px;
                background: #05b9db;
                margin-right: 1vh;
            }

            .icon-4 {
                width: 30px;
                height: 15px;
                background: #1948df;
                margin-right: 1vh;
            }

            .icon-5 {
                width: 30px;
                height: 15px;
                background: #dd256c;
                margin-right: 1vh;
            }
        }
    }
}
</style>